<template>
    <div class='news-detail'>
        <public-head>
            <span>房屋租赁详情</span>
        </public-head>
        <div class="content">
            <div class="head">
                <h2 class="title">{{ news_detail.name }}</h2>
                <p class="time">{{ news_detail.datePub }}</p>
            </div>
            <div class="container" v-html="news_detail.value">
    
            </div>
        </div>
        <loading v-if="is_loading"></loading>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            news_detail: {} // 
        }
    },
    created() {
        // fetch news detail
        this.isLoading(true)
        this.axios.post(root + '/api/wx/ad/get', { settingId: this.$route.query.settingId}).then((res) => {
            this.isLoading(false)
            this.news_detail = res.data.data
        })
    },
    methods: {
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['is_loading'])
    }
}
</script>>

<style lang="less">
@import '../../../common/style/mixin.less';
.news-detail {
    height: 100%;
    background: #fff;
    .content {
        padding: .35rem .3rem;
        .bor1pxTop;
        .head {
            padding-bottom: 0.35rem;
            .title {
                .ft(.28rem);
                color: #222;
                font-weight: 700;
            }
            .time {
                color: #999;
                .ft(.2rem);
                margin-top: .21rem;
            }
        }
        .container {
            .bor1pxTop;
            padding-top: .15rem;
            p {
                .ft(.26rem);
                line-height: .44rem;
                color: #404040; //text-indent: 2em;
            }
            img {
                display: block;
                margin: .2rem auto;
                max-width: 100%;
            }
        }
    }
}
</style>
